<template>
	<view class="register">
		
		<image class="logo" src="/static/img/logo.png"></image>
		
		<view class="title">
			悠带租
		</view>
		
		<view class="input-bg">
			<input @input="changeMobile"  class="uni-input" type="text" name="phone" placeholder="请输入手机号" />
		</view>
	
		<view class="input-bg" style="margin-top:28rpx">
			<input @input="changePass" class="uni-input" type="password" name="pass" placeholder="请输入密码" />
		</view>
		
		<view class="submit"  @click="loginIn" >登录</view>
		
		<view class="bottom">
			<view class="forget">忘记密码</view>
			<image class="shu" src="/static/icon/shu.png"></image>
			<view class="zhuce"><navigator url="/pages/login/register">用户注册</navigator></view>
		</view>
		
		<view class="agree">登录即代表同意<font style="color:#000000">用户服务协议</font></view>
		
		<mpopup  ref="mpopup" :isdistance="true"></mpopup>
		
	</view>
</template>

<script>
	var _self;
	import mpopup from '../../components/xuan-popup/xuan-popup.vue';
	export default {
		components:{
			mpopup
		},
		data() {
			return {
				title: 'Hello',
				phone:'',
				pass:''				
			}
		},
		onLoad() {
		},
		methods: {
			changeMobile(e){
				this.phone = e.detail.value					
			},
			changePass(e){
				this.pass = e.detail.value
			},									
			loginIn(){
				_self = this;
				
				if(!_self.phone){
					_self.$refs.mpopup.open({
						type:'err',
						content:'请填写手机号',
						timeout:2000,
					});
					return false;
				}
				if(!_self.pass){
					_self.$refs.mpopup.open({
						type:'err',
						content:'请填写密码',
						timeout:2000,
					});
					return false;
				}
			
				uni.request({
					url:this.websiteUrl+'/userapi.php/Login/login',
					method:'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded'				  
					},
					data: {
					    mobile: _self.phone,
						password: _self.pass
					},
					success:function(res){
						if(res.data.code ==1){
							_self.$refs.mpopup.open({
									type:'success',
									content:res.data.msg,
									timeout:3000,
							});	
							
							uni.setStorageSync('token',res.data.data.token)
						
							uni.switchTab({
							    url: '/pages/discover/index'
							});	
						}else{
							_self.$refs.mpopup.open({
									type:'info',
									content:res.data.msg,
									timeout:2000,
							});
						}
					}
				})	
			}
		}
	}
</script>

<style>

	
    .register {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #E5E5E5;
		height: 1620rpx;
	}
	
	.logo{
		width:220rpx;
		height: 216rpx;
		padding-top:200rpx;
	}
	
	
	.title{
		font-size:48rpx;
		line-height:48rpx;
		font-weight: bold;
		margin-top: 40rpx;
	}
	.note{
		font-size:26rpx;
		line-height: 26rpx;
		margin-top: 20rpx;
	}
	.input-bg{
		width:694rpx;
		height:112rpx;
		margin:100rpx 28rpx 28rpx 28rpx;
		background: #FFFFFF;
		border-radius: 60rpx;
	}

	.uni-input{
		width:100%;
		height:112rpx;
		line-height: 44rpx;
		font-size: 32rpx;
	    color: #AAAAAA;
		text-align: center;
	}
 .uni-input2{
	     
	    float:left;
		width:65%;
		height:112rpx;
		font-size: 32rpx;
	    color: #AAAAAA;
		text-align: center;
	}

	.get-yzm{
		float:left;
		width:25%;
		height: 112rpx;
		line-height: 112rpx;
		font-size:32rpx;
		color:#FF984C;
	}

	.submit{
		width:300rpx;
		height: 112rpx;
		line-height: 112rpx;
		margin: 60rpx 226rpx;
		background: #FF984C;
		text-align: center;
		color: white;		
		font-size: 32rpx;
		border-radius: 60rpx;
	}
	
	.bottom{
		width:100%;
		height: 36rpx;
		line-height: 36rpx;
		font-size:26rpx;
		font-weight: bold;
		position:relative
	}
	
	
	.forget{
		position:absolute;
		left:210rpx;	
	}
	
	.shu{
		position:absolute;
		left:374rpx;
		width:4rpx;
		height: 36rpx;
	}
	
	.zhuce{
		position:absolute;
		left:434rpx
	}
	
	.agree{
		width:100%;
		height: 28rpx;
		font-size:20rpx;
		color:#808080;
		text-align: center;
		margin-top:60rpx;
	}
	
	
	
	
	
	
	
	
</style>
